<template>
	<view>
		<view class="uni-list" v-for="(item,key) in messages" :key="key" >
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" >
				<movable-area>
					<movable-view out-of-bounds="true" direction="horizontal" :x="item.xmove" inertia="true" :data-productIndex="key"
					 @bindchange="handleMovableChange">
						<view class="uni-media-list" @click="goTo(item.chatId)">
							<view class="uni-media-list-logo">
								<image :src="baseUrl+item.fromImgUrl" v-if="item.chatType=='CHAT'"></image>
								<image :src="item.fromImgUrl" v-else></image>
								<view class="image-badge" v-if="item.count > 0">
									<uni-badge :text="item.count" type="primary" :inverted="true"></uni-badge>
								</view>
							</view>
							<view class="uni-media-list-body">
								<view class="uni-media-list-text-top">
								<view class="uni-flex uni-row" style="justify-content: space-between;">
									<view class="text">{{item.fromNickName}}</view>
								<view class="text" style="font-size: 10px; color: #B2B2B2;">{{item.createdStamp}}</view>
								</view>
								
								</view>
								<view class="uni-media-list-text-bottom uni-ellipsis" v-if="item.msgType=='TEXT'">{{item.content}}</view>
								<view class="uni-media-list-text-bottom uni-ellipsis" v-if="item.msgType=='IMAGE'">图片</view>
								<view class="uni-media-list-text-bottom uni-ellipsis" v-if="item.msgType=='VOICE'">声音</view>
								<view class="uni-media-list-text-bottom uni-ellipsis" v-if="item.msgType=='VEDIO'">视频</view>
							</view>
						</view>
					</movable-view>


				</movable-area>
				<view class="delete-btn" :data-productIndex="key" @click="handleDelete">删除</view>

			</view>
		</view>



	</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	import uniBadge from "@/components/uni-badge.vue";

	import {
		getUrl
	} from '@/common/oss';
	export default {

		data() {
			return {
				baseUrl: ""
			};
		},
		component: {
			uniBadge
		},
		computed: {
			...mapState({
				messages: state => state.message.messages,
			}),
		},
		onLoad(e) {
			this.baseUrl = getUrl();
		},
		mounted() {
// 			console.log(JSON.stringify(this.$store.state))
 			console.log(JSON.stringify(this.$store.state.message))
		},
		methods: {
			/**
			 * 隐藏删除按钮
			 */
			hideDeleteButton: function(e) {
				let productIndex = e.currentTarget.dataset.productindex
				console.log("productIndex:" + productIndex)
				this.setXmove(productIndex, 0)
			},

			/**
			 * 设置movable-view位移
			 */
			setXmove: function(productIndex, xmove) {
				this.$store.dispatch("updateFreindsMessageAction",{
					index:productIndex,
					key:"xmove",
					value:xmove
				})
			},
			/**
			 * 处理movable-view移动事件
			 */
			handleMovableChange: function(e) {
				if (e.detail.source === 'friction') {
					if (e.detail.x < -30) {
						this.showDeleteButton(e)
					} else {
						this.hideDeleteButton(e)
					}
				} else if (e.detail.source === 'out-of-bounds' && e.detail.x === 0) {
					this.hideDeleteButton(e)
				}
			},
			/**
			 * 显示删除按钮
			 */
			showDeleteButton: function(e) {
				let productIndex = e.currentTarget.dataset.productindex
				this.setXmove(productIndex, -65)
			},

			handleDelete: function(e) {
				let productIndex = e.currentTarget.dataset.productindex
				uni.showModal({
				title: '删除对话',
				content:'你确认需要该条会话吗?',
				showCancel: false,//去掉取消按钮
				success: function (res) {
					if (res.confirm) {
						this.$store.dispatch("deleteFriedsMessageAction", {index: productIndex});
					}
				},
				});
				
			}, 
			goTo: function(e) {
				console.log("goto"+e)
				let msg = this.messages.findIndex(p => p.chatId = e);
				if(msg.chatType == "NOTIFY") {
					
				} else if(msg.chatType == "ACTION") {
					
				} else {
					uni.navigateTo({
						url: "/pages/im/chat?fromPartyId="+ friend.fromPartyId+"&fromNickName="+friend.fromNickName
					})
				}
				
			}
		}


	}
</script>

<style>
	.uni-list .uni-list-cell {
		position: relative;
		width: 100vw;
		border-bottom: 2upx solid #E9E9E9;
		box-sizing: border-box;
		background: #fff;
		z-index: 999;
		height: 100upx;
		border-bottom: #757575 solid 1upx;
	}

	.uni-list .uni-list-cell movable-view {
		width: 100vw;
		height: 100upx;
		background: #fff;
		z-index: 999;
	}

	.uni-list .uni-list-cell movable-area {
		line-height: 100upx;
		height: 100upx;
		width: calc(100vw - 120upx);
	}

	.uni-list .uni-list-cell .delete-btn {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		width: 120upx;
		font-size: 24upx;
		color: #FFFFFF;
		font-family: PingFangSC-Regular;
		line-height: 100upx;
		height: 100upx;
		z-index: 1;
		background: #E66671;
		text-align: center;
	}

	.image-badge {
		/* background-color: white;
		font-color: #ececec;
		font-size: 30px;
		width: 30px;
		height: 30px;
		text-align: center;

		border-radius: 100%;
		transform: rotate(45deg); */
		cursor: pointer;
		
		top: 2upx;
		right: 2upx; /* topright距离上侧2个像素，距离右侧两个像素，也就是右上角 */
		display: block; /* 块元素:设置宽和高，inline元素设置宽高无效 */
		position: absolute; /*绝对定位，关联父元素的relative*/
	}
</style>
